<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>卡通Q版九宫格抽奖</title>
  <style>
    body {
      margin: 0;
      font-family: "Comic Sans MS", "Segoe UI", sans-serif;
      background: linear-gradient(135deg, #ffe6f0, #d4f1ff);
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
    }
    h1 {
      margin: 15px;
      color: #ff6699;
      text-shadow: 2px 2px #fff;
    }
    /* 九宫格容器 */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 120px);
      grid-template-rows: repeat(3, 120px);
      gap: 12px;
      margin: 20px 0;
    }
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      border-radius: 20px;
      background: #fff8dc;
      border: 3px dashed #ff99cc;
      cursor: pointer;
      padding: 5px;
      transition: transform 0.3s, background 0.3s;
      line-height: 1.4em;
    }
    .cell.active {
      background: #ffccf9;
      transform: scale(1.1);
      box-shadow: 0 0 15px rgba(255,105,180,0.6);
    }
    .start {
      background: #ff6699;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      border: none;
      border-radius: 15px;
      transition: background 0.3s, transform 0.2s;
    }
    .start:hover {
      background: #ff3366;
      transform: scale(1.05);
    }
    /* 控制面板 */
    .panel {
      margin: 15px 0;
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .panel label {
      font-size: 14px;
      color: #333;
    }
    .history {
      margin-top: 15px;
      width: 320px;
      padding: 10px;
      background: rgba(255,255,255,0.7);
      border: 2px dashed #ff99cc;
      border-radius: 12px;
      font-size: 14px;
      color: #444;
    }
  </style>
</head>
<body>
  <h1>🎀 卡通Q版九宫格抽奖 🎀</h1>
  <div class="grid" id="grid">
    <div class="cell" data-name="棒棒糖" data-price="5">🍭<br>棒棒糖<br>5元</div>
    <div class="cell" data-name="饼干" data-price="10">🍪<br>饼干<br>10元</div>
    <div class="cell" data-name="甜甜圈" data-price="15">🍩<br>甜甜圈<br>15元</div>
    <div class="cell" data-name="巧克力" data-price="20">🍫<br>巧克力<br>20元</div>
    <button class="start" id="start">开始抽奖</button>
    <div class="cell" data-name="果汁" data-price="12">🧃<br>果汁<br>12元</div>
    <div class="cell" data-name="草莓" data-price="8">🍓<br>草莓<br>8元</div>
    <div class="cell" data-name="西瓜" data-price="25">🍉<br>西瓜<br>25元</div>
    <div class="cell" data-name="神秘礼物" data-price="50">🎁<br>神秘礼物<br>50元</div>
  </div>

  <!-- 控制面板 -->
  <div class="panel">
    <label>速度: <input type="number" id="speed" value="200" min="50" max="1000"> ms</label>
    <label>圈数: <input type="number" id="rounds" value="3" min="1" max="10"></label>
  </div>

  <!-- 历史记录 -->
  <div class="history" id="history">历史记录：<br></div>

<script>
  const cells = document.querySelectorAll(".cell");
  const startBtn = document.getElementById("start");
  const historyBox = document.getElementById("history");
  const speedInput = document.getElementById("speed");
  const roundsInput = document.getElementById("rounds");

  let timer, index = 0, running = false;

  function highlightCell(i) {
    cells.forEach(c => c.classList.remove("active"));
    if (cells[i]) cells[i].classList.add("active");
  }

  function startLottery() {
    if (running) return;
    running = true;
    let speed = parseInt(speedInput.value);
    let rounds = parseInt(roundsInput.value);
    let steps = rounds * cells.length + Math.floor(Math.random() * cells.length);

    timer = setInterval(() => {
      highlightCell(index % cells.length);
      index++;
      steps--;
      if (steps <= 0) {
        clearInterval(timer);
        running = false;
        let prizeCell = cells[(index - 1) % cells.length];
        let prizeName = prizeCell.dataset.name;
        let prizePrice = prizeCell.dataset.price;
        historyBox.innerHTML += `🎉 恭喜中奖：${prizeName}，价值 ${prizePrice} 元<br>`;
      }
    }, speed);
  }

  startBtn.addEventListener("click", startLottery);
</script>
</body>
</html>
